<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<title>语音小助手</title>

	<link href="https://cdn.bootcss.com/loaders.css/0.1.2/loaders.min.css" rel="stylesheet">
	<style>
		body {
			margin: 0;
			padding: 0;
			background: black;
			color: white;
		}

		#app {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			font-size: 20px;
		}

		.voice-loader {
			text-align: center;
			padding-top: 50px;
		}

		.voice-loader .ball-pulse-rise {
			height: 80px;
			width: 100px;
			margin: 0 auto;
		}
	</style>
	<script>
		let query = new URLSearchParams(location.search)

		function ckvpn() {
			console.log(speechSynthesis.getVoices())
			return new Promise((resolve, reject) => {
				setTimeout(() => {

					console.log(speechSynthesis.getVoices())
					let isChrome = speechSynthesis.getVoices().some(ele => ele.name.includes('Google'))
					console.log('isChrome：', isChrome)
					if (!isChrome) {
						reject()
					}
					fetch('https://www.google.com/gen_204', { mode: 'no-cors' }).then(res => {
						resolve()
					})
					setTimeout(() => {
						reject()
					}, 2000)

				}, 100)
			})

		}


		function redirect(url) {
			// 检测是否有外网地址			
			let base_url = query.get('base_url')
			let api = query.get('api')
			// 判断当前是否支持本地服务
			if (url.indexOf('http') == 0) {
				api = encodeURIComponent(base_url + api)
			} else {
				api = encodeURIComponent(api)
			}
			let link = `${url}?api=${api}`
			console.log(link)
			location.replace(link)
		}

		; (() => {
			// 如果是APP套壳,则调用APP里的语音识别
			if (query.get('app') === 'voice') {
				return redirect('app.html')
			}
			// 检测是否HTTPS
			if (location.protocol === 'https:' || location.hostname === 'localhost') {
				// 检测能否外网访问
				ckvpn().then(() => {
					// 使用google语音
					redirect('google.htm')
				}).catch(() => {
					// 使用百度语音
					redirect('baidu.htm')
				})
			} else {
				top.alert('不好意思, 你的域名不是HTTPS,所以玩不了')
			}
		})();

	</script>
</head>

<body>
	<div id="app">
		<div class="voice-loader">
			<div class="ball-pulse-rise">
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
			</div>
			<div>
				正在检测浏览器环境
			</div>
		</div>
	</div>
</body>

</html>